<%--
  User: Shengzhao Li
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>记录日志</title>
</head>
<body>
<%--log form page--%>
<div id="log_form_page" data-role="page" class="page">
    <div data-role="header" data-theme="f">
        <a href="${contextPath}/m/dashboard" data-icon="home" data-direction="reverse"
           data-transition="slide">主页</a>

        <h1>记录日志</h1>
        <a href="javascript:void(0);" data-icon="arrow-l" data-rel="back">返回</a>
    </div>
    <div data-role="content">
        <form:form commandName="logDto" id="log_form" data-ajax="false" onsubmit="$.mobile.showPageLoadingMsg();">
            <ul data-role="listview">
                <li>
                    <div data-role="fieldcontain">
                        <label for="type_select">类型:</label>
                        <select id="type_select" name="logType.guid" data-native-menu="false">
                            <c:forEach items="${logTypeDtos}" var="type">
                                <option value="${type.guid}" ${(logDto.logType.guid eq type.guid or type.selectedType)?'selected':''}>
                                        ${type.defaultType?'':'&gt;'}&nbsp;${type.name}
                                </option>
                            </c:forEach>
                        </select>
                        <form:errors path="logType.guid" cssClass="form_error"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="log_date">日期:</label>
                        <input type="text" name="logDate" id="log_date" value="${logDto.logDate}"
                               placeholder="日期"/>
                        <form:errors path="logDate" cssClass="form_error"/>
                    </div>
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup">
                            <legend>可见性:</legend>
                            <form:radiobutton path="visibility" value="PUBLIC" label="所有人可见"/>
                            <form:radiobutton path="visibility" value="PRIVATE" label="仅自己可见"/>
                            <form:errors path="visibility" cssClass="form_error"/>
                        </fieldset>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="content_">日志内容:</label>
                        <textarea rows="4" cols="30" name="content" id="content_"
                                  placeholder="日志内容">${logDto.content}</textarea>
                    </div>
                </li>
                <li>
                    <div data-role="fieldcontain">
                        <form:hidden path="longitude" id="longitude"/>
                        <form:hidden path="latitude" id="latitude"/>

                        <input type="hidden" name="addNext" value="false" id="add_next"/>
                        <button type="submit" data-theme="b" data-icon="plus">保存</button>
                        <a data-theme="b" data-icon="plus" data-role="button"
                           href="javascript:saveAndNext();">保存&继续添加</a>
                        <a href="overview" data-theme="c" data-icon="delete" data-role="button" data-transition="flip">取消</a>
                    </div>
                </li>
            </ul>
        </form:form>
    </div>
    <script type="text/javascript">
        $("#log_form_page").live("pagecreate", function () {
            $("#log_date").scroller({
                preset:'date',
                dateFormat:'yy-mm-dd',
                dateOrder:'ymmdd',
                theme:"jqm",
                lang:"zh",
                animate:"flip"
            });
        });

        function saveAndNext() {
            $("#add_next").val('true');
//            $.mobile.showPageLoadingMsg();
            $("#log_form").submit();
        }
    </script>
    <c:if test="${logDto.allowRecordPosition}">
        <script type="text/javascript">
            function getPositionSuccess(position) {
                if (position.coords) {
                    $("#longitude").val(position.coords.longitude);
                    $("#latitude").val(position.coords.latitude);
                }
            }

            function getPositionError(error) {
                console.log(error);
            }

            if (navigator.geolocation) {
                navigator.geolocation.watchPosition(getPositionSuccess, getPositionError, {maximumAge:30000, timeout:10000});
            }
        </script>
    </c:if>
</div>
</body>
</html>